<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <title>Tigua Reference</title>
        <meta http-equiv="content-language" content="en">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="David M. Lopez">
        <meta name="description" content="Canvas JavaScript Library">
        <meta name="keywords" content="JavaScript Library, Tigua, Canvas">
        <meta name="viewport" content="width=450; user-scalable=no">
        <link rel="stylesheet" type="text/css" media="screen,print" href="../util/log4javascript/main.css" title="Default" />
        <script src="../util/log4javascript/log4javascript.js" type="text/javascript" charset="utf-8"></script>
        <script src="../tigua.js" type="text/javascript" charset="utf-8"></script>

        <script>
        var c;

        function startup() {
          var popuplog = false;
          if (popuplog) {
            var log = log4javascript.getDefaultLogger("main");
          } else {
            var log = log4javascript.getLogger("main");
            var appender = new log4javascript.BrowserConsoleAppender();
            appender.setLayout(new log4javascript.PatternLayout(log4javascript.ABSOLUTETIME_DATEFORMAT));
            log.addAppender(appender);
          }

          //attach to existing canvas in page
          c = new tigua.canvas('cnvs');

          log.debug("Drawing tests");

          function background(config) {
            tigua.component.call(this,config);            
          }
          background.prototype = new tigua.component;
          background.prototype.render = function (ctx) {
            if (!this.lingrad) {
              this.lingrad = ctx.createLinearGradient(0,0,this.width,this.height);  
              this.lingrad.addColorStop(0,   new tigua.color({h:0,    s:100,v:75}));  
              this.lingrad.addColorStop(0.1, new tigua.color({h:36,   s:100,v:75}));  
              this.lingrad.addColorStop(0.2, new tigua.color({h:36*2, s:100,v:75}));  
              this.lingrad.addColorStop(0.3, new tigua.color({h:36*3, s:100,v:75}));  
              this.lingrad.addColorStop(0.4, new tigua.color({h:36*4, s:100,v:75}));  
              this.lingrad.addColorStop(0.5, new tigua.color({h:36*5, s:100,v:75}));  
              this.lingrad.addColorStop(0.6, new tigua.color({h:36*6, s:100,v:75}));  
              this.lingrad.addColorStop(0.7, new tigua.color({h:36*7, s:100,v:75}));  
              this.lingrad.addColorStop(0.8, new tigua.color({h:36*8, s:100,v:75}));  
              this.lingrad.addColorStop(0.9, new tigua.color({h:36*9, s:100,v:75}));  
              this.lingrad.addColorStop(1,   new tigua.color({h:360,  s:100,v:75}));  
            } 
            ctx.fillStyle = this.lingrad;
            ctx.fillRect(0,0,this.width,this.height);
          }
          
          var b = new background({id:'background'});
          c.setBackground(b);
          //c.setBackground("#FFFFFF");
          
          //simple component that just draws a red square
          function square(config) {
            tigua.component.call(this,config);
            if (!this.color) this.color = new tigua.color({h:0,s:100,v:100}).toString();
            if (!this.dx) this.dx = 5;
            if (!this.dy) this.dy = 6;
          }
          square.prototype = new tigua.component;
          square.prototype.render = function (ctx,canvas) {
            ctx.fillStyle = this.color;
            ctx.fillRect(0,0,this.width,this.height);
            this.x += this.dx;
            this.y += this.dy;
            if (this.x < 0 || (this.x + this.width) > canvas.getWidth()) {
              this.dx=-this.dx;
            }
            if (this.y < 0 || (this.y + this.height) > canvas.getHeight()) {
              this.dy=-this.dy;
            }
          }
          
          var s = new square({x:20,y:10,width:50,height:50,color:new tigua.color({h:0,s:100,v:100}).toString()})
          c.addComponent(s);
          s = new square({x:20,y:200,width:50,height:50,dx:6,dy:-5,color:new tigua.color({h:120,s:100,v:100}).toString()})
          c.addComponent(s);
          s = new square({x:200,y:10,width:50,height:50,dx:-5,dy:7,color:new tigua.color({h:240,s:100,v:100}).toString()})
          c.addComponent(s);
          
          c.startAnimation(30);          
        }
        </script>
    </head>
    <body onload="startup();">
      <canvas id="cnvs" width="300" height="300"></canvas><br>
      <button type='button' value='Start' onclick='c.startAnimation();'>Start</button>
      <button type='button' value='Start' onclick='c.stopAnimation();'>Stop</button>
    </body>
</html>
